<template>
  <!-- 签到 -->
  <!--  <u-navbar-->
  <!--    title="每日签到"-->
  <!--    placeholder-->
  <!--    titleStyle="color:white"-->
  <!--    leftIconColor="#fff"-->
  <!--    auto-back-->
  <!--  ></u-navbar>-->
  <view class="return_title">
    <u-status-bar></u-status-bar>
    <view class="content">
      <u-icon @click="back" name="arrow-left" color="#ffffff" size="20"></u-icon>
      <text class="title">每日签到</text>
    </view>
  </view>
  <view class="content">
    <view class="Wrap-bg">
      <view class="go-member-content">
        <text class="null-view"></text>
        <text class="go-member" @click="goMember">兑换会员</text>
      </view>
      <view class="title">签到领会员</view>
      <view class="sigin-box">
        <view class="xingxing" v-for="(item,index) in dateArr" :key="index" @click="handleMakeUpSignIn(item)">
          <view v-if="!item.day">

          </view>
          <view class="tianshu" v-else>
            <view class="xingicon2" v-if="item.flag">
              <image :src="BaseImgUrl + '/images/signwei2.png'"></image>
              <view style="height: 10rpx"></view>
              <view v-if="item.type === 1" class="bq">已签到</view>
              <view v-else>已补签</view>
            </view>
            <view class="xingicon" v-else>
              <image :src="BaseImgUrl + '/images/signwei1.png'"></image>
              <view style="height: 10rpx"></view>
              <view>{{ item.day }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="qiandaoBtn" v-if="signIndo.continuity_days === 29 && signFinish === 1" @click="zuisignBtn()">领取会员
      </view>
      <view class="qiandaoBtn" v-else @click="signBtn()">今日签到</view>

      <u-popup :show="vipShow" mode="center" radius="14" width="550" closeable @close="vipShow = false">
        <view class="viplingqu">
          <image src="https://img.alicdn.com/imgextra/i4/3829152210/O1CN01T66Ac31SCE3IsCqtS_!!3829152210.png"
                 mode="widthFix"></image>
          <view class="gongxi">恭喜您领取成功</view>
          <view class="youxiaioqi">当前会员有效期: 30天</view>
          <view class="lookbtn">查看会员特权</view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script setup>
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getSignInMonthAPI, makeUpSignInAPI, signInInAPI} from "../../services/me";
import {BaseImgUrl} from "../../utils/lshttp";
import {conUtils} from "../../utils/conUtils";

const signIndo = ref({})
const signFinish = ref(0)
const vipShow = ref(false)
const dateArr = ref([])
onLoad(() => {
  getSignInMonth()
})
const goMember = () => {
  uni.navigateTo({
    url: '/pages_gold/index_gold'
  })
}
const back = () => {
  uni.navigateBack()
}

// 获取签到记录
const getSignInMonth = async () => {
  const res = await getSignInMonthAPI()
  dateArr.value = res.result
  if (dateArr.value.length > 30) {
    dateArr.value.push({}, {}, {}, {}, {})
  } else if (dateArr.value.length === 29) {
    dateArr.value.push({})
  } else if (dateArr.value.length === 28) {
    dateArr.value.push({}, {})
  } else if (dateArr.value.length === 27) {
    dateArr.value.push({}, {}, {})
  }
}
// 补签
const handleMakeUpSignIn = async (item) => {
  const res = await makeUpSignInAPI(item.date)
  conUtils("补签", res)
  conUtils("补签", res.msg)
  await getSignInMonth()
  await uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 1800,
  })

}
// 立即签到
const signBtn = async () => {
  const res = await signInInAPI()
  conUtils("签到", res)
  conUtils("签到", res.msg)
  await getSignInMonth()
  await uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 1800,
  })
}
// 领取会员
const zuisignBtn = () => {
  vipShow.value = true
}
</script>
<style>
page {
  background-image: url("https://img.alicdn.com/imgextra/i1/3829152210/O1CN012tWYGM1SCE37l07Fv_!!3829152210.png");
  background-size: 100% 100%;
  background-position: center;
}
</style>
<style lang="scss" scoped>

.return_title {
  width: 100%;
  padding: 20rpx 30rpx 16rpx;
  position: fixed;
  color: white;
  z-index: 999;
  top: 0;
  background: url("https://img.alicdn.com/imgextra/i1/3829152210/O1CN012tWYGM1SCE37l07Fv_!!3829152210.png");
  background-size: cover;

  .content {
    display: flex;
    align-items: center;
  }

  .title {
    margin-right: 38rpx;
    font-size: 36rpx;
    font-weight: normal;
    flex: 1;
    text-align: center;
  }
}

.go-member {
  color: #FFFFFF;
  background-color: #FF5B54;
  border-radius: 68rpx;
  padding: 0 18rpx;
  font-size: 26rpx;
  height: 46rpx;
  line-height: 46rpx;
}

.go-member-content {
  display: flex;

  .null-view {
    flex: 1;
  }
}

.Wrap-bg {
  background-color: #FFDFDECC;
  border-radius: 20rpx;
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 30rpx;
  width: 85%;

  .title {
    color: #FF5B54;
    text-align: center;
    font-size: 35rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
  }

  .sigin-box {
    margin: auto;
    display: flex;
    flex-wrap: wrap;

    .xingxing {
      text-align: center;
      width: 90rpx;
      margin: 8rpx auto 0;

      .xingicon {
        color: #666666;
        font-weight: bold;

        test {
          margin-top: 5rpx;
        }

        image {
          width: 60rpx;
          height: 60rpx;
        }
      }

      .xingicon2 {
        image {
          width: 60rpx;
          height: 60rpx;
        }

        .bq {
          color: #FF5B54;
        }
      }

      .tianshu {
        //color: #FF837E;
        color: rgb(255, 132, 33);
        font-size: 22rpx;
      }
    }
  }

  .qiandaoBtn {
    background-color: #FF5B54;
    color: #FFFFFF;
    font-size: 38rpx;
    text-align: center;
    width: 80%;
    margin: 30rpx auto 0;
    padding: 20rpx 50rpx;
    border-radius: 200rpx;
  }
}

.viplingqu {
  text-align: center;
  padding: 60rpx 0;

  image {
    width: 300rpx;
  }

  .gongxi {
    font-weight: bold;
    font-size: 40rpx;
    color: #4F2600;
  }

  .youxiaioqi {
    font-size: 32rpx;
    color: #4F2600;
    margin: 20rpx 0 40rpx 0;
  }

  .lookbtn {
    color: #4F2600;
    border-radius: 200rpx;
    padding: 20rpx 10rpx;
    text-align: center;
    width: 60%;
    margin: 0 auto;
    font-size: 32rpx;
    background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
  }
}

.xingico33n {
  image {
    width: 60rpx;
    height: 60rpx;
  }
}
</style>
